import React, { PureComponent } from "react";
import { Howl } from 'howler';
import QRCode from 'qrcode.react';
import {
  Footer,
  Header,
  Arwes,
  Image,
  Words,
  Frame,
  Table,
  Button,
  Project,
  Row,
  Col,
  Link
} from "arwes";
export default class batchQrCode extends PureComponent {
  constructor(props) {
    super(props);
    this.qrtypemap = {
      1: '1',
      2: '2',
      3: '箱码',
      4: '4',
      5: '5',
      6: '瓶码',
      7: '盒码',
      8: '盒码',
    }
    this.sounds = {
      click: new Howl({
        src: ['./sound/click.mp3']
      }),
      typing: new Howl({
        src: ['./sound/typing.mp3']
      }),
      deploy: new Howl({
        src: ['./sound/deploy.mp3']
      }),
    }
    this.state = {
      show: false,
      filelist: [],
    };
  }
  componentDidMount() {
    this.refs.getfile.addEventListener("change", readfile, false);
    const that = this
    function readfile() {
      let file = this.files[0];
      let filename = this.files[0].name
      let reader = new FileReader();
      reader.readAsText(file, 'gb2312');
      reader.onload = function (filee) {
        const fileresult = filee.target.result.split('\r\n')
        const resultlist = []
        for (let i = 0; i < fileresult.length; i++) {
          if (fileresult[i] == '') {
            break;
          }
          let list = fileresult[i].split(',')
          const optionlist = list[1].split('/')
          resultlist.push({
            name: list[0],
            uuid: optionlist[5],
            type: that.qrtypemap[optionlist[4]],
            typenum: optionlist[4],
            qrcode: list[1],
            isoperation: false,
          })
        }
        const filelist = that.state.filelist.concat([{
          name: filename,
          show: false,
          list: resultlist
        }])
        that.setState({
          filelist: filelist
        })
      };
    }
    this.setState({
      show: true
    })
  }
  uploadFile = () => {
    console.log(this.refs.getfile.click());
  }
  showfile = (i) => {
    const datalist = this.state.filelist
    datalist[i].show = !datalist[i].show
    this.setState({
      filelist: datalist
    })
    this.forceUpdate();
  }
  removefile = (i) => {
    this.state.filelist.splice(i,1)
    this.forceUpdate();
  }
  gohome = (url) => {
    if (this.props.location.pathname == url) {
      return
    }
    this.sounds.click.play()
    this.sounds.deploy.play()
    this.setState({
      show: !this.state.show
    });
    setTimeout(() => {
      this.props.history.push(url);
    }, 500);
  }
  zhihui = (number) => {
    let list = number.split('_')
    console.log(this.state.filelist[list[0]].list[list[1]])
    this.state.filelist[list[0]].list[list[1]].isoperation = !this.state.filelist[list[0]].list[list[1]].isoperation
    this.forceUpdate();
  }
  render() {
    const iconmap = {
      3: (<i className='mdi mdi-package-variant' />),
      6: (<i className='mdi mdi-bottle-soda' />),
      7: (<i className='mdi mdi-cube' />),
      8: (<i className='mdi mdi-cube' />),
    }
    let filetabledata = []
    let qrcodelist = []
    for (let i = 0; i < this.state.filelist.length; i++) {
      let tabledataoption = []
      tabledataoption[0] = (<span style={{ fontSize: 10 }}>{this.state.filelist[i].name}</span>)
      let listdata = this.state.filelist[i].list
      let pinnum = 0
      let henum = 0
      let xiangnum = 0
      let yisao = 0
      let weisao = 0
      for (let j = 0; j < listdata.length; j++) {
        this.state.filelist[i].list[j].number = i + '_' + j
        if (listdata[j].type == this.qrtypemap[6]) {
          pinnum++
        } else if (listdata[j].type == this.qrtypemap[7]) {
          henum++
        } else if (listdata[j].type == this.qrtypemap[3]) {
          xiangnum++
        }
        if (listdata[j].isoperation) {
          yisao++
        } else {
          weisao++
        }
      }
      tabledataoption[1] = pinnum == 0 ? (<span style={{ color: 'gray' }}>{0}</span>) : pinnum
      tabledataoption[2] = henum == 0 ? (<span style={{ color: 'gray' }}>{0}</span>) : henum
      tabledataoption[3] = xiangnum == 0 ? (<span style={{ color: 'gray' }}>{0}</span>) : xiangnum
      tabledataoption[4] = yisao == 0 ? (<span style={{ color: 'gray' }}>{0}</span>) : yisao
      tabledataoption[5] = weisao == 0 ? (<span style={{ color: 'gray' }}>{0}</span>) : weisao
      tabledataoption[6] = (
        <>
          <Button animate show={false} onClick={() => { this.removefile(i) }}>移除</Button>
          <Button animate show={this.state.filelist[i].show} onClick={() => { this.showfile(i) }}>展示</Button>
        </>
      )
      if (this.state.filelist[i].show) {
        qrcodelist = qrcodelist.concat(this.state.filelist[i].list)
      }
      filetabledata.push(tabledataoption)
    }
    const qrcode = qrcodelist.map(option => (
      // <div style={{background:'rgba(255,255,255,0.2)',backgroundColor:'rgba(255,255,255,0.2)'}}>
      //   <p>
      //         <Row nested noMargin>
      //           <Col s={6} style={{ fontSize: 17, color: option.isoperation ? '#999999' : '#acf9fb' }}>
      //             <div style={{ margin: 20 ,color:'black'}}>
      //               编号：{option.name}<br />
      //               type 编号：{option.typenum}<br />
      //               uuid：{option.uuid}<br />
      //             </div>

      //           </Col>
      //           <Col s={6}>
      //             <QRCode
      //               id="qrCode"
      //               value={option.qrcode}
      //               size={200} // 二维码的大小
      //               bgColor={option.isoperation ? '#999999' : 'white'}
      //               fgColor="#000000" // 二维码的颜色
      //               style={{ margin: 'auto', marginLeft: 100, border: '1px solid ' + (option.isoperation ? '#999999' : '#26dafd') }}
      //             /></Col>
      //         </Row>

      //       </p>
      //       <p style={{ marginTop: 20, color: option.isoperation ? '#999999' : '#acf9fb' }}>
      //         <i className='mdi mdi-qrcode' style={{margin: 20,color:'black'}}/>&nbsp;&nbsp;
      //         <Words animate show={true} layer='control' style={{ fontSize: 18, fontFamily: '站酷文艺体',color:'black' }}>
      //           {option.qrcode}
      //         </Words>
      //       </p>
      // </div>
      <Project
        style={{ marginTop: 20 }}
        show={true}
        animate
        headerSize='h3'
        onClick={() => { this.zhihui(option.number) }}
        icon={<div>{iconmap[option.typenum]}&nbsp;{option.type}</div>}
        header={option.name}
      >
        {anim => (
          <div style={{background:'rgba(255,255,255,0.8)',backgroundColor:'rgba(255,255,255,0.8)'}}>
          <p>
                <Row nested noMargin>
                  <Col s={6} style={{ fontSize: 17, color: option.isoperation ? '#999999' : '#acf9fb' }}>
                    <div style={{ margin: 20 ,color:'black'}}>
                      编号：{option.name}<br />
                      type 编号：{option.typenum}<br />
                      uuid：{option.uuid}<br />
                    </div>
  
                  </Col>
                  <Col s={6}>
                    <QRCode
                      id="qrCode"
                      value={option.qrcode}
                      size={200} // 二维码的大小
                      bgColor={option.isoperation ? '#999999' : 'white'}
                      fgColor="#000000" // 二维码的颜色
                      style={{ margin: 'auto', marginLeft: 100, border: '1px solid ' + (option.isoperation ? '#999999' : '#26dafd') }}
                    /></Col>
                </Row>
  
              </p>
              <p style={{ marginTop: 20, color: option.isoperation ? '#999999' : '#acf9fb' }}>
                <i className='mdi mdi-qrcode' style={{margin: 20,color:'black'}}/>&nbsp;&nbsp;
                <Words animate show={anim.entered} layer='control' style={{ fontSize: 18, fontFamily: '站酷文艺体',color:'black' }}>
                  {option.qrcode}
                </Words>
              </p>
        </div>
        )}
      </Project>
    ))
    return (
      <Arwes
        timeout={1500}
        animate
        show={this.state.show}
        background="./img/background-large.jpg"
        pattern="./img/glow.png"
        style={{ height: '100%' }}
      >
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          <Header animate show={this.state.show}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <a style={{
                textAlign: 'left',
                width: '50%',
                float: 'left',
                padding: '0 10px',
                display: 'inline-block'
              }}>
                <Image
                  show={this.state.show}
                  onClick={() => this.gohome('/')}
                  layer={"header"}
                  animate
                  resources='./img/mine.jpeg'
                  style={{ width: 45, height: 45, margin: 0, display: 'inline-block' }}></Image>
                <Words
                  onClick={() => this.gohome('/')}
                  animate
                  show={this.state.show}
                  style={{
                    display: 'inline-block',
                    fontSize: 28,
                    color: '#a1ecfb',
                    fontFamily: 'Electrolize, sans-serif',
                    textShadow: '0 0 4px',
                    fontWeight: 'bold',
                    textTransform: 'uppercase',
                    margin: '0 0 0 10px',
                    paddingTop: 4,
                    lineHeight: 1,
                    verticalAlign: 'middle'
                  }}>
                  GUO WÉNJUN
                </Words>
              </a>
              <div style={{ textAlign: 'right', width: '50%', float: 'right', padding: '0 10px', marginLeft: 'auto' }}>
                <Link onClick={() => this.gohome('/blog')} style={{ fontFamily: "Electrolize,sans-serif", lineHeight: '45px' }}><i className="mdi mdi-note-outline" /> Blog</Link>
                <Link onClick={() => this.gohome('/paper')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-box-cutter" /> Paper</Link>
                <Link onClick={() => this.gohome('/tools')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-calculator" /> Tools</Link>
              </div>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Header>
          <div
            style={{
              flex: '1',
              padding: '20px 0',
              overflowY: 'auto',
            }}
          >
            <div
              style={{
                margin: '0 auto',
                maxWidth: 800,
                marginBottom: 0,
              }}
            >
              <input
                id="getfile"
                ref="getfile"
                type="file"
                style={{ display: "none" }}
              />
              <div style={{ fontSize: 24 }}>
                <Link show={this.state.show} >
                  <i className="mdi mdi-chevron-double-right" />
                  <Words show={this.state.show} animate style={{ marginLeft: 5 }}>二维码批量展示</Words>
                </Link>

                <Link style={{ float: 'right' }} show={this.state.show} >
                  <i className="mdi mdi-chevron-double-left" />
                </Link>
                <Button onClick={() => this.uploadFile()} style={{ float: 'right' }} animate><i className="mdi mdi-plus" />新增文件</Button>
                <div style={{ clear: 'both' }}></div>
              </div>
              <Frame
                style={{ marginTop: 20, padding: '10px' }}>
                <Table
                  animate
                  headers={['文件名', '瓶码', '盒码', '箱码', '已扫', '未扫', '操作']}
                  dataset={filetabledata}
                />
              </Frame>
              {qrcode}
            </div>
          </div>
          <Footer animate show={this.state.show} style={{ textAlign: 'left' }}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <Link href='https://gitee.com/mimidegongkai' target="_blank">
                <i className="mdi mdi-code-brackets" />
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>Codebase</Words>
              </Link>

              <Link style={{ float: 'right' }} href='http://beian.miit.gov.cn/' target="_blank">
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>京ICP备2021006930号</Words>
              </Link>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Footer>
        </div>
      </Arwes >
    );
  }
}
